<template>
  <div class="fmainBox">
    <div class="tqyb">
      <el-tabs
        v-model="activeName"
        @tab-click="onTabChange"
        type="card">
        <!-- 天气预报 -->
        <el-tab-pane label="天气预报" name="prediction" >
          <template v-if="userStore.userInfo.farmId">
            <today-weather-info ref="twiRef"></today-weather-info>
            <div class="wtitle"> <span>72小时天气</span></div>
            <weather72hour ref="w72h"></weather72hour>
            <div class="wtitle"> <span>15日预报</span></div>
            <weather15day ref="w15d"></weather15day>

          </template>
          <template v-else>
            <div style="text-align: center;padding:50px 0; font-size:14px">暂无数据</div>
          </template>
        </el-tab-pane>
        <!-- 历史天气 -->
        <el-tab-pane label="历史天气" name="history">
          <temperatureView v-if="activeName=='history'" height="82vh"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="courseList">
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
import { nextTick, ref, watch, onActivated, reactive, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { useFramStore } from '@/pinia/modules/farm'
import todayWeatherInfo from './components/todayWeatherInfo.vue'
import weather72hour from './components/weather72hour.vue'
import weather15day from './components/weather15day.vue'
import temperatureView from '../land/index/components/temperature.vue'

const activeName = ref('prediction')
const userStore = useUserStore()
const w72h = ref(null)
const w15d = ref(null)
const twiRef = ref(null)

onMounted(async() => {
  let currentFarm = userStore.userInfo.farmList.find(item=>item.farmId==userStore.userInfo.farmId)
  twiRef.value.get_Prediction_Weather(`${currentFarm.locationLongitude},${currentFarm.locationLatitude}`)
  w72h.value.get_weather_72_hour(`${currentFarm.locationLongitude},${currentFarm.locationLatitude}`)
  w15d.value.get_weather_15_day(`${currentFarm.locationLongitude},${currentFarm.locationLatitude}`)

})
</script>

<style lang="scss" scoped>
  .fmainBox{
      display: flex;
      box-sizing: border-box;
      //border: 1px solid red;
      min-width: 1200px;
      .wtitle{
          box-sizing: border-box;
          display: flex;
          height: auto;
          align-items: center;
          border-bottom: 1px solid #ededed;
          padding-bottom: 6px;
          padding:0 10px 10px 10px;
          span{
              display: flex;
              align-items: center;
              font-size: 16px;
              flex: 1;
              font-weight: bold;
              &::before{
                  content: "";
                  display: block;
                  width: 3px;
                  background: #FF9C00;
                  height: 14px;
                  margin: 0 3px 0 0;
              }
          }
      }
      .ncweacher{
          box-sizing: border-box;
          width: 350px;
          background-color: #fff;
          padding: 10px;
          flex-shrink: 0;
      }
      .tqyb{
          flex: 1;
          box-sizing: border-box;
          background-color: #fff;
          margin: 0 0 0 10px;
          padding: 10px;
          width: calc(100vw - 637px);;
      }
  }
</style>
  
